<template>
	<!-- 设备管理页面布局 -->
	<view class="equipmentLayout">
		<!-- 外层遍历,家庭 -->
		<view class="family" v-for="family in families" :key="family.id">
			<view class="familyText">
				<view class="name">{{family.familyName}}</view>
				<view class="description">{{family.information}}</view>
			</view>
			<!-- 中层遍历,房间 -->
			<view class="room" v-for="room in family.rooms" :key="room.id">
				<view class="roomText">
					<view class="name">{{room.roomName}}</view>
					<view class="description">{{room.information}}</view>
				</view>
				<view class="equipment" v-for="equipment in room.equipments" :key="equipment.id">
					<view class="row rowText">
						<view class="left1">设备名称</view>
						<view class="left2">MAC地址</view>
						<view class="left3">设备描述</view>
					</view>
					<view class="row">
						<view class="left1">{{equipment.equipmentName}}</view>
						<view class="left2">{{equipment.mac}}</view>
						<view class="left3">{{equipment.information}}</view>
					</view>
					<view class="row rowText">
						<view class="left1">传感器类型</view>
						<view class="left2">网关MAC地址</view>
						<view class="left3">管理操作</view>
					</view>
					<view class="row">
						<view class="left1">{{equipment.equipmentType}}</view>
						<view class="left2">{{equipment.gatewayMac}}</view>
						<view class="button">
							<button type="default" size="mini" @click="equipmentUpdate(equipment.id)">修改</button>
							<button type="warn" size="mini" @click="equipmentRemove(equipment.id)">删除</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 修改设备 -->
		<view class="saveLayout" v-if="isUpdate">
			<uni-data-select placeholder="请选择所在房间" :localdata="selectRoom" v-model="update_equipment.roomId" />
			<input v-model="update_equipment.equipmentName" />
			<input v-model="update_equipment.mac" />
			<input v-model="update_equipment.information" />
			<input v-model="update_equipment.gatewayMac" />
			<uni-data-select placeholder="请选择传感器类型" :localdata="selectType" v-model="update_equipment.equipmentType" />
			<view class="button">
				<button @click="onUpdate">确定</button>
				<button @click="cancelUpdate">取消</button>
			</view>
		</view>
		<!-- 创建设备 -->
		<view class="saveLayout" v-if="isSave">
			<uni-data-select placeholder="请选择所在房间" :localdata="selectRoom" v-model="new_equipment.roomId" />
			<input placeholder="请输入设备名称" v-model="new_equipment.equipmentName" />
			<input placeholder="请输入设备详情" v-model="new_equipment.information" />
			<input placeholder="请输入设备MAC地址" v-model="new_equipment.mac" />
			<input placeholder="请输入网关MAC地址" v-model="new_equipment.gatewayMac" />
			<uni-data-select placeholder="请选择传感器类型" :localdata="selectType" v-model="new_equipment.equipmentType" />
			<view class="button">
				<button @click="onSave">确定</button>
				<button @click="cancelSave">取消</button>
			</view>
		</view>
		<button class="button" type="primary" @click="save" v-show="!isSave">创建设备</button>
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	import { onShow } from "@dcloudio/uni-app";
	import { type Equipment } from '@/types/equipment';
	import { getStore } from "@/utils/getToken";
	import { createEquipment, deleteEquipment, updateEquipment, readEquipmentByOwnerId, getEquipmentById } from "@/services/sysEquipmentApi";
	import { readRoom } from "@/services/sysRoomApi";

	/**
	 * 公共数据获得方法
	 * 两个 uni-data-select 下拉菜单的数据
	 */
	let selectType = ref([                                // 选择设备类型,前端固定参数
		{ value: 'DHT', text: 'DHT' },
		{ value: 'AEM1000', text: 'AEM1000' },
		{ value: 'UPS', text: 'UPS' },
		{ value: 'MPPT', text: 'MPPT' },
		{ value: 'EM', text: 'EM' }
	])
	let selectRoom = ref([])                              // 选择房间,网络接口数据
	function getRoomList() {
		readRoom(getStore('id')).then(res => {
			selectRoom.value = res.map(item => {   		        // map方法遍历接收list数据,返回需要的字段名称
				return {
					value: item.id,
					text: item.roomName
				}
			})
		})
	}

	/**
	 * 添加设备
	 * 2个下拉选择数据,4个手动输入数据
	 * 对象存储
	 */
	let isSave = ref(false);
	let new_equipment = ref<Equipment>({})                // 创建新的响应式对象
	function save() {                                     // 点击打开创建窗口
		getRoomList()
		isSave.value = true
	}
	function cancelSave() {                               // 取消只关闭窗口,不刷新数据
		isSave.value = false
	}
	function onSave() {                                   // 保存数据的点击事件函数
		if (new_equipment.value.equipmentName == null) {
			uni.showToast({                                   // 弹出结果
				title: "请输入设备名称"
			})
		} else if (new_equipment.value.mac == null) {
			uni.showToast({                                   // 弹出结果
				title: "请输入MAC地址"
			})
		} else if (new_equipment.value.roomId == null) {
			uni.showToast({                                   // 弹出结果
				title: "选择所在房间"
			})
		} else if (new_equipment.value.equipmentType == null) {
			uni.showToast({                                   // 弹出结果
				title: "选择传感器类型"
			})
		} else {
			createEquipment(new_equipment.value).then(res => {
				uni.showToast({                                   // 弹出结果
					title: res
				})
				getFamilyRoomEquipment();                         // 刷新数据
				isSave.value = false                              // 关闭窗口
				new_equipment.value.roomId = 0                    // 清除数据
				new_equipment.value.equipmentName = ''
				new_equipment.value.information = ''
				new_equipment.value.mac = ''
				new_equipment.value.gatewayMac = ''
				new_equipment.value.equipmentType = ''
			})
		}
	}

	/**
	 * 逻辑删除设备
	 * 根据id删除，返回统一的Result.msg
	 * 删除后刷新数据
	 */
	function equipmentRemove(id : number) {               // 删除数据点击事件函数
		uni.showModal({
			title: "是否确认删除?",
			content: "本删除为逻辑删除",
			cancelColor: "#999",
			confirmColor: "#ff0000",
			success: function (res) {
				if (res.confirm) {
					deleteEquipment(id).then(res => {
						uni.showToast({                                   // 弹出结果
							title: res
						})
						getFamilyRoomEquipment();                         // 刷新数据
					})
				}
			}
		})
	}
	/**
	 * 修改设备
	 * 展示数据根据id单独查询一次
	 * 1. 点击修改按钮显示修改界面,每点击一次修改会重新获得一次数据
	 * 2. 取消修改的方法，关闭界面，刷新数据
	 * 3. 获取显示当前数据,显示数据来自接口 getEquipmentById(equipmentId)
	 */
	let isUpdate = ref(false);
	let update_equipment = ref<Equipment>({})             // 创建新的响应式对象
	function equipmentUpdate(equipmentId : number) {      // 更新数据的点击事件函数   
		getRoomList()                                       // 1. 获取下来菜单数据
		getEquipmentById(equipmentId).then(res => {   	// 2. 查询 sys_equipment 表,根据id返回数据,返回数据去模版层渲染
			update_equipment.value = res
		})
		isUpdate.value = true                               // 3. 修改 v-for 的条件
	}
	function cancelUpdate() {                             // 取消需要刷新模版层,防止模版层数据已经被更改
		isUpdate.value = false;
		getFamilyRoomEquipment();
	}
	function onUpdate() {                                 // 确认修改的点击事件函数
		updateEquipment(update_equipment.value).then(res => {
			uni.showToast({                                   // 弹出结果
				title: res
			});
			isUpdate.value = false;                           // 关闭窗口
			getFamilyRoomEquipment();                         // 刷新数据
		})
	}

	/**
	 * 查询设备数据,查询户主
	 * 根据use_id,返回3层嵌套对象数组
	 */
	let families = ref([])                                // 含设备数组数据的房间数组对象,用于模版层渲染
	function getFamilyRoomEquipment() {
		readEquipmentByOwnerId(getStore('id')).then(res => {
			families.value = res
		})
	}

	onShow(() => {
		getFamilyRoomEquipment();                           // 每次切换页面刷新数据
	})
</script>

<style lang="scss" scoped>
	.equipmentLayout {
		.family {
			width: 730rpx;
			margin: 10rpx auto; // 两个参数 上下/左右
			border: 1px solid#eee;
			border-radius: 15rpx;
			box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.05);
			background-color: #fafafa;

			.familyText {
				display: flex;
				justify-content: space-between; // 左右两端对齐
				height: 80rpx;
				margin: auto 40rpx;
				align-items: center;

				.name {
					display: inline;
					vertical-align: bottom;
					font-size: 32rpx;
					color: #761f31; // 字体颜色
				}

				.description {
					display: inline;
					vertical-align: bottom;
					font-size: 28rpx;
					color: #666; // 字体颜色
				}
			}

			.room {
				width: 710rpx;
				margin: 10rpx auto; // 两个参数 上下/左右
				border: 1px solid#eee;
				border-radius: 15rpx;
				box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.05);
				background-color: #eaeaea;

				.roomText {
					display: flex;
					justify-content: space-between; // 左右两端对齐
					height: 100rpx;
					margin: auto 40rpx;
					align-items: center;

					.name {
						display: inline;
						vertical-align: bottom;
						font-size: 32rpx;
						color: #208060; // 字体颜色
					}

					.description {
						display: inline;
						vertical-align: bottom;
						font-size: 26rpx;
						color: #666; // 字体颜色
					}
				}

				.equipment {
					width: 710rpx;
					margin: 10rpx auto; // 两个参数 上下/左右
					border: 1px solid#eee;
					border-radius: 15rpx;
					box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.05);
					background-color: #dadada;
					color: #141f43;
					font-size: 30rpx;

					.row {
						display: flex; // 弹性布局
						margin: 10rpx; // 外边距,一个参数 4边
						text-align: center; // 文字水平居中
						height: 60rpx;

						.left1 {
							width: 25%;
						}

						.left2 {
							width: 35%;
						}

						.left3 {
							width: 40%;
						}

						.button {
							width: 40%;
							display: flex;
							align-items: center;
							margin-bottom: 10rpx;
						}
					}

					.rowText {
						color: #1e676c;
						font-size: 28rpx;
					}
				}
			}
		}

		.saveLayout {
			position: fixed; // 显示在屏幕的固定位置,并不随屏幕滚动
			top: 600rpx; // 距离屏幕顶部的距离
			width: 730rpx;
			margin: 10rpx; // 一个参数 4边
			border: 1px solid#eee;
			border-radius: 15rpx;
			box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.05);
			background-color: #fff; // 添加背景色,并且不透明

			input {
				margin: 20rpx 20rpx; // 外边距，两个参数(上下/左右)
				padding: 2rpx 20rpx 2rpx 20rpx; // 内边距（上/右/下/左）
				height: 60rpx;
				box-shadow: 5rpx 5rpx 10rpx rgba(0, 201, 249, 0.6); // 边框阴影(x轴便宜/y轴便宜/模糊半径)
				border: 1rpx solid #ccc; // 边框宽度/颜色
				border-radius: 20rpx; // 圆角
			}

			.button {
				display: flex; // 弹性布局
				justify-content: center; // 垂直居中
				align-items: center;
				margin: 50rpx;
			}
		}
	}
</style>